<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<!-- TopJUI框架样式 -->
<link type="text/css" href="../../topjui/themes/default/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="../../topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme" />
<!-- FontAwesome字体图标 -->
<link type="text/css" href="../../statics/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- layui框架样式 -->
<link type="text/css" href="../../statics/plugins/layui/css/layui.css" rel="stylesheet" />
<!-- jQuery相关引用 -->
<script type="text/javascript" src="../../statics/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../statics/plugins/jquery/jquery.cookie.js"></script>
<!-- TopJUI框架配置 -->
<script type="text/javascript" src="../../statics/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心-->
<script type="text/javascript" src="../../topjui/js/topjui.core.min1.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="../../topjui/js/locale/topjui.lang.zh_CN.js"></script>
<!-- layui框架js -->
<script type="text/javascript" src="../../statics/plugins/layui/layui.js" charset="utf-8"></script>

</head>
<body>
<br>
	<br>
    <div class="topjui-fluid">
        <fieldset>
            <legend>参数说明</legend>
        </fieldset>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">消息类型：</label>
                <div class="topjui-input-block">
                <input type="hidden" name="infotypename" id="infotypename">
				<input type="text" name="infotypeid" id="infotypeid"
                           data-toggle="topjui-combobox"
                           data-options="data:[{value:'1',text:'公共消息'},{value:'2',text:'通知消息'}],
                           
		                       onSelect:function(node){
		                       	$('#infotypename').val(node.text);
		                       	$('#infotypeid').val(node.value);
		                       	alert($('#infotypename').val()+'   '+$('#infotypeid').val());
		                       },
                           
                           
                           ">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">消息标题：</label>
                <div class="topjui-input-block">
				<input id="title" type="text" name="title"
                           style="" class="textbox-f" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填'"  />
                </div>
            </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">消息副标题：</label>
                <div class="topjui-input-block">
				<input id="abs" type="text" name="abs"
                           style="" class="textbox-f" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填'"  />
                </div>
            </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">消息内容：</label>
                <div class="topjui-input-block">
				<input id="content" type="text" name="content"
                           style="" class="textbox-f" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填'"  />
                </div>
            </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm4">
                <label class="topjui-form-label">通知人员：</label>
                <div class="topjui-input-block">
		             <input type="text" name="roleid" id="roleid"
		                   data-toggle="topjui-combobox"
		                   data-options="required:false,
		               prompt:'通知人员',
		               valueField:'id',
		               textField:'text',
		               method:'get',
		               
		               onSelect:function(node){
		               		var tempid=node.id;//避免和下面加载成功后的回调函数参数同名
		               		$('form[id^=infoDg]:first').find('#uids').datalist({
		               			url:'/info/queryUserByroleid?roleid='+node.id,
		               			method: 'get', 
		        				valueField: 'id',//绑定字段ID            
		        				textField: 'text',//绑定字段Name   
	               				singleSelect:false,
	               				checkbox:true,
	               				onLoadSuccess:function(node,data){
		                      		if(tempid=='0')
		                      		{
		                      			debugger;
		                      			for(var i=0;i<node.total;i++)
		                      			{
		                      				$('#uids').datalist('checkRow',i);
		                      			}
		                      			
		                      		}
	                      		
	                      		}
		               		});
		               },
		               
		               
		               onLoadSuccess:function(data){
		               		
		               },
		               url:'/info/queryRole'">
                </div>
            </div>

        </div>

        <div class="topjui-row">
            <!-- 多选下拉的宽与高不会设 -->
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">请选择人员：</label>
                <div class="topjui-input-block">

					<input id="uids" type="text" name="uids" class="textbox-f" data-toggle="topjui-datalist" style="width: 300px;height: 200px"
                            data-options="required:true,
                            				prompt:'必选',
                            method:'get',
                            textField:'text',
                            valueField:'id',
                            onLoadSuccess:function(node,data){
	                      	},
	                      	singleSelect:false "/>


                </div>
            </div>
        </div>


    </div>
<script>
	function openAddDiag(){
		ID = '';
		var $addDialog = $('<form id="roleDg-add"  style="width: 600px; height:350px; margin: auto; display: none;"></form>');
		var diag = $addDialog.dialog({
		    title: '角色新建',
		    href: '/web/view/role/role_add.html',
		    modal: true,
		    resizable:true,
 		    maximizable:true,
		    collapsible:true,
		    buttons:[{
				text:'保存',
				handler:function(){
					if($('#roleDg-add').form('validate')) {
						var formData = $("#roleDg-add").serialize();
						var url = '/role/insertRole';
						debugger;	
						var rows = $('input[name="authids"]');
						var authids=[];
						rows.each(function(){
							var obj ={};
							obj.authid = $(this).val();//这个键值对的key值这里是authid，要与xml中的描述一致；
							authids.push(obj);
						});
			            $.post(url,formData+'&roleid='+ID+'&aids='+JSON.stringify(authids),function (res,status) {
			                if (status == 'success') { // 后台返回状态值
			                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
			                    $("#roleDg").iDatagrid('reload');// 刷新下表格数据
			                    diag.dialog("destroy");// 销毁dialog面板
			                } else {
			                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
			                }
			            },'JSON');
					}
				}
			},{
				text:'关闭',
				handler:function(){diag.dialog("destroy");}
			}],onClose: function () {
                $(this).dialog('destroy');//销毁
            }
		});
		$addDialog.dialog('open');
		
	}
	
	//表头“操作”栏，formatter定义，这里面可以自定义按钮样式
	//row = {authShowStr: "系统管理 , 部门管理... ", createuserid: "1", id: "1", isdel: "0", rolename: "管理员"}
	function operateFormatter(value, row, index) {
		debugger;
        var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.id + '\')">编辑</button>';
        htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.id + '\')">删除</button>';
        return htmlstr;
    }
	function deleteRow(id){
		debugger;
		$.messager.confirm("操作提示", "是否删除？", function (data) {
			if(data) {
				$.post("/role/delRole",{"roleid":id},function(res,status){
					 if (status == 'success') { // 后台返回状态值
		                 $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
		                 $("#roleDg").iDatagrid('reload');// 刷新下表格数据（roleDg是上面数据表格的id）
		                 $('#roleAddDialog').iDialog('destroy');// 销毁dialog面板
		             } else {
		                 $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
		             }
				},'JSON');
			}else {}
		});
	}
	
	//打开编辑页面
	var ID = "";//定义全局变量用于保存当前角色id
	function openEditDiag(id){
		debugger;
		ID = id;
		$.ajax({ url: "/role/queryRoleById?roleid="+ID, 
 			type:"get",dataType:"json", success: function(data){
 			openDialog(data.data);//调用下面的用于回显的打开对话框函数
		 }}); //调用下面的函数时只提供了返回的role对象，并没有authids的数组，这个怎么处理呢？？？
	}
	
	//由openEditDiag(id)函数末尾调用
	function openDialog(d){
		var $updateDialog = $('<form id="roleDg-update"  style="width: 600px; height: 350px; margin: auto; display: none;"></form>');
		var diag = $updateDialog.dialog({
		    title: '角色编辑',
		    href: '/web/view/role/role_add.html',
		    modal: true,
		    resizable:true,
 		    maximizable:true,
		    collapsible:true,
		    buttons:[{
				text:'保存',
				handler:function(){
					if($('#roleDg-update').form('validate')) {
						  var formData = $("#roleDg-update").serialize();
						  var url = '/role/updateRole';
						  //这里模仿上面的写法获取checkbox的值

						debugger;	
						var rows = $('input[name="authids"]');//authids是role_add.html页面中的下拉列表的checkbox控件的name
						var authids=[];
						rows.each(function(){
							var obj ={};
							obj.authid = $(this).val();//这个键值对的key值这里是authid，要与xml中的描述一致；
							authids.push(obj);
						});
						  
							//下面的参数也要参考上面的写法
							//aids是Controller的updateRole方法中的参数
			            	$.post(url,formData+'&roleid='+ID+'&aids='+JSON.stringify(authids),function (res,status) {
				            //$.post(url,formData+'&roleid='+ID,function (res,status) {
				                if (status == 'success') { // 后台返回状态值
				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
				                    $("#roleDg").iDatagrid('reload');// 刷新下表格数据
				                    diag.dialog("destroy");// 销毁dialog面板
				                } else {
				                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
				                }
				            },'JSON');
					  }
				}
			},{
				text:'关闭',
				handler:function(){diag.dialog("destroy");}
			}],
			onClose: function () {
                $(this).dialog('destroy');//销毁
            },onLoad :function(){
        		debugger;
            	$('#roleDg-update').form('load',d);//回显数据
            }
		});
		$updateDialog.dialog('open');
	}
	
</script>
</body>
</html>